﻿<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
<title>实名认证</title>
<link href="bootstrap-3.3.5-dist/css/bootstrap.min.css" title="" rel="stylesheet" />
<link title="" href="css/style.css" rel="stylesheet" type="text/css"  />
<link title="blue" href="css/dermadefault.css" rel="stylesheet" type="text/css"/>
<link title="green" href="css/dermagreen.css" rel="stylesheet" type="text/css" disabled="disabled"/>
<link title="orange" href="css/dermaorange.css" rel="stylesheet" type="text/css" disabled="disabled"/>
<link href="css/templatecss.css" rel="stylesheet" title="" type="text/css" />

<script src="script/jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="script/jquery.cookie.js" type="text/javascript"></script>
<script src="bootstrap-3.3.5-dist/js/bootstrap.min.js" type="text/javascript"></script>
    <script src="js/vue.js"></script>
    <script src="js/vue-resource.js"></script>
    <script src="js/layer/layer.js"></script>
    <script>

    </script>
</head>

<body>
<div class="app">
    <nav class="nav navbar-default navbar-mystyle navbar-fixed-top">
        <div class="navbar-header">
            <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand mystyle-brand"><span class="glyphicon glyphicon-home"></span></a> </div>
        <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li class="li-border"><a class="mystyle-color" href="#">AKB管理系统</a></li>
            </ul>

            <ul class="nav navbar-nav pull-right">
                <li class="dropdown"><a href="#" class="dropdown-toggle mystyle-color" data-toggle="dropdown">换肤<span class="caret"></span></a>
                    <ul class="dropdown-menu changecolor">
                        <li id="blue"><a href="#">蓝色</a></li>
                        <li class="divider"></li>
                        <li id="green"><a href="#">绿色</a></li>
                        <li class="divider"></li>
                        <li id="orange"><a href="#">橙色</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </nav>
    <div class="down-main">
        <div class="left-main left-off">
            <div class="sidebar-fold"><span class="glyphicon glyphicon-menu-hamburger"></span></div>
            <div class="subNavBox">
                <div class="sBox">
                    <div class="subNav sublist-down"><span class="title-icon glyphicon glyphicon-chevron-down"></span><span class="sublist-title">用户中心</span>
                    </div>
                    <ul class="navContent" style="display:block">
                        <li class="active">
                            <div class="showtitle" style="width:100px;"><img src="img/leftimg.png" />实名认证</div>
                            <a href="identify.html"><span class="sublist-icon glyphicon glyphicon-credit-card"></span><span class="sub-title">实名认证</span></a>
                        </li>
                        <li class="">
                            <div class="showtitle" style="width:100px;"><img src="img/leftimg.png" />提币审核</div>
                            <a href="Coinaudit.html"><span class="sublist-icon glyphicon glyphicon-credit-card"></span><span class="sub-title">提币审核</span></a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="right-product view-product right-off">
            <div class="container-fluid">
                <div class="info-center">
                    <div class="page-header">
                        <div class="pull-left">
                            <h4>实名认证</h4>
                        </div>
                    </div>
                    <div class="indentify-class padding-lr">
                        <form class="searchBox" @submit.prevent="search">
                            <div>
                                <label class="find_labela">用户ID：</label><input v-model.trim="ID" type="text" class="find_input">
                                <label class="find_labela">手机号：</label><input v-model.trim="tel" type="text" class="find_input">
                                <!--<label class="find_labela">注册时间：</label><input type="text" class="find_input">-->
                                <!--<a href="javascript:;" class="continue text-big">搜索</a>-->
                                <select class="state" v-model="state">
                                    <option value="">全部</option>
                                    <option value="-1">未上传</option>
                                    <option value="0">审核失败</option>
                                    <option value="1">审核成功</option>
                                    <option value="2">正在审核</option>
                                </select>
                                <button @click="searchBox" type="button" class="btn btn-primary">搜索</button>
                            </div>
                        </form>
                        <table class="table table-striped ident-table">
                            <tr>
                                <th>用户ID</th>
                                <th>手机号</th>
                                <th>注册时间</th>
                                <th>实名状态</th>
                                <th>操作</th>
                            </tr>
                            <tr v-for="(item,idx) in dataList">
                                <td>{{item.userId}}</td>
                                <td>{{item.phone}}</td>
                                <td>{{format(item.createDate)}}</td>
                                <td>{{checkState(item.flag)}}</td>
                                <td><button type="button" @click="see(idx)" class="btn btn-primary" data-toggle="modal" data-target="#myModal">查看</button></td>
                            </tr>
                            <tr>
                                <td v-show="isDataNull" style="padding: 18px 15px; text-align: center; font-size: 16px;" colspan="4">抱歉，没有查询数据哦</td>
                            </tr>
                        </table>
                        <div v-show="isShow" class="pagination">
                            <ul class="pages">
                                <li @click="go(1,$event)"><button :disabled="isDisableP" type="button">首页</button></li>
                                <li @click="go(pager.pn--,$event)"><button :disabled="isDisableP">上一页</button></li>
                                <li :class='pager.pn==n.val ? "active" : ""' @click="go(n.val,$event)" v-for="n in pager.arr"><a href="javascript:;">{{n.val}}</a></li>
                                <li @click="go(pager.pn++,$event)"><button :disabled="isDisableN">下一页</button></li>
                                <li @click="go(pager.pc,$event)"><button :disabled="isDisableN">尾页</button></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--<h2>创建模态框（Modal）</h2>-->
    <!-- 模态框（Modal） -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">实名图片</h4>
                </div>
                <div class="modal-body">
                    <div>
                        <!--<p>用户ID:{{userId}}</p>-->
                        <p>用户姓名：<input v-on:input='keyFn($event)' style="text-indent: 1rem;" type="text" v-model="userName" name="username" placeholder="用户姓名"/></p>
                    </div>
                    <img @click="lookBigImg('IDcardurlA')" :src="IDcardurlA" width="200" height="120">
                    <img @click="lookBigImg('IDcardurlB')" :src="IDcardurlB" width="200" height="120">
                </div>
                <div class="modal-footer">
                    <button type="button" @click="examine(1)" class="btn btn-primary">通过</button>
                    <button type="button" @click="examine(0)" class="btn btn-primary" data-dismiss="modal">驳回</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
    <div id="IDcardurlA" style="display: none;"><img style="width: 100%;" :src="IDcardurlA"> </div>
    <div id="IDcardurlB" style="display: none;"><img style="width: 100%;" :src="IDcardurlB"> </div>
</div>

<script type="text/javascript">
    Vue.prototype.keyFn = function(event){
        var el = event.currentTarget;
        if($(el).hasClass('error')) {
            $(el).removeClass('error');
        }
    };
    // String.prototype.trim = function() {
    //     return this.replace(/(^\s*)|(\s*$)/g, "");
    // };

    var vm = new Vue({
        el:'.app',
        data:{
            ID:'',
            tel:'',
            dataList:[],
            state:'',
            isShow:false,
            pn:1,
            ps:10,
            pages:null,
            isDisableN:false,
            isDisableP:true,
            IDcardurlA:null,
            IDcardurlB:null,
            userId:null,
            userName:null,
            isDataNull:false
        },
        computed:{
            pager : function(){
                var pn = this.pn;
                // var total = this.maxCount;
                // var pc = Math.ceil(total/this.ps);
                var pc = this.pages;
                var left = 1;
                var right = pc;
                var ar = [];
                if(pc>= 5){
                    if(pn > 3 && pn < pc-2){
                        left = pn - 2;
                        right = pn + 2;
                    }else{
                        if(pn<=3){
                            left = 1;
                            right = 5;
                        }else{
                            right = pc;
                            left = pc - 4;
                        }
                    }
                }
                var pager = {};
                if(pn > 1){
                    pager.first = {name:'首页',val:1};
                    pager.prov = {name:'上一页',val:pn-1};
                }
                while (left <= right){
                    //ar.push({name:'第'+left+'页',val:left})
                    ar.push({name:left,val:left});
                    left ++
                }
                if(pn < pc){
                    pager.next = {name:'下一页',val:pn+1};
                    pager.end = {name:'尾页',val:pc};
                }
                pager.arr = ar;
                pager.pn = pn;
                pager.pc = pc;
                return pager
            }
        },
        mounted:function(){
            this.getData();
        },
        methods:{
            checkState:function(e){
                switch (e)
                {
                    case -1:
                        return '未上传';
                        break;
                    case 0:
                        return '审核失败';
                        break;
                    case 1:
                        return '审核成功';
                        break;
                    case 2:
                        return '正在审核';
                        break;
                }
            },
            format:function(shijianchuo){
                var add0 = function (m) {
                    return m<10?'0'+m:m
                };
                //shijianchuo是整数，否则要parseInt转换
                var time = new Date(shijianchuo);
                var y = time.getFullYear();
                var m = time.getMonth()+1;
                var d = time.getDate();
                var h = time.getHours();
                var mm = time.getMinutes();
                var s = time.getSeconds();
                return y+'-'+add0(m)+'-'+add0(d)+' '+add0(h)+':'+add0(mm)+':'+add0(s);
            },
            go:function (k,event) {
                var el = event.currentTarget;
                /* console.log($(el).children().html());
                 console.log('pager/'+this.pager.pn);
                 console.log('k/'+k);*/
                var pageText = $(el).children().html();
                if( pageText== "上一页" || pageText == "下一页"){
                    this.pn = this.pager.pn;
                }else{
                    this.pn = k;
                }
                this.getData();
            },
            searchBox:function(){
            	this.pn = 1;
                this.getData();
            },
            lookBigImg:function(k){
                console.log(k);
                layer.open({
                    type: 1,
                    title: false,
                    closeBtn: 0,
                    area: '516px',
                    skin: 'layui-layer-nobg', //没有背景色
                    shadeClose: true,
                    content: $('#'+k)
                });
            },
            checkUser:function(){
                if(this.userName === null){
                    $("[name='username']").addClass('error').focus();
                    alert("用户姓名不能为空");
                    return false;
                }
                return true;
            },
            examine:function(k){
                console.log(k);
                if(k==1){
                    if(!this.checkUser()){ return false;}
                }
                this.$http.post('/akbm_dfc/cbt/admin/verificationFlag',
                    {
                        userId:this.userId,
                        userName:this.userName,
                        flag:k
                    },
                    {
                        emulateJSON:true
                    }).then(function(res){
                    console.log(JSON.parse(res.bodyText).message);
                    if(JSON.parse(res.bodyText).code == 100){
                        $('#myModal').modal('hide');
                        if(k==1){
                            alert("审核"+JSON.parse(res.bodyText).message);
                        }else{
                            alert("驳回"+JSON.parse(res.bodyText).message);
                        }
                        this.getData();
                    }
                },function(res) {
                    console.log(res.msg);
                })
            },
            getData:function () {
                var _this = this;
                $.ajax({
                    type: "post",
                    url:"/akbm_dfc/cbt/admin/verificationIDcard",
                    // contentType: "application/json;charset=utf-8",
                    data :{
                            userId:this.ID,
                            phone:this.tel,
                            flag:this.state,
                            page:this.pn,
                            rows:this.ps
                    },
                    // dataType: "json",
                    beforeSend: function (XMLHttpRequest) {
                        XMLHttpRequest.setRequestHeader("authorization", $.cookie('authorization'));
                    },
                    success: function (res) {
                        console.log(res);
                        if(res.code == 100){
                            console.log(res.data.userList);
                            _this.dataList = res.data.userList;
                            console.log(_this.dataList);
                            _this.pages = res.data.totalPage;
                            console.log(_this.dataList.length);
                        }

                    },error:function(error){
                        console.log(error);
                    }
                });
            },
            see:function (k) {
                console.log(k);
                console.log(this.dataList[k].IDcardurlA);
                console.log(this.dataList[k].IDcardurlB);
                var str = 'http://akbmining.club/picture/';
                this.IDcardurlA = str + this.dataList[k].IDcardurlA;
                this.IDcardurlB = str + this.dataList[k].IDcardurlB;
                this.userId = this.dataList[k].userId;
            }
        },
        watch:{
            pn:function (nVal,oVal){
                // console.log(nVal +'/'+oVal);
                if(nVal == 1){
                    console.log("第一页");
                    this.isDisableP = true;
                    this.isDisableN = false;

                } else if(nVal == this.pager.pc){
                    console.log("最后一页");
                    this.isDisableP = false;
                    this.isDisableN = true;

                }else {
                    this.isDisableP = false;
                    this.isDisableN = false;
                }
            },
            pages:function (nVal,oVal) {
                // console.log(nVal +'/'+oVal);
                console.log(this.totalPage);
                if(nVal == 0){
                    this.isShow = false;
                    this.isDataNull = true;
                }else if(nVal == 1){
                    this.isShow = false;
                    this.isDataNull = false;
                }else{
                    // console.log("监听");
                    this.isShow = true;
                    this.isDataNull = false;
                }
            }
        }
    });

$(function(){
/*换肤*/
$(".dropdown .changecolor li").click(function(){
	var style = $(this).attr("id");
    $("link[title!='']").attr("disabled","disabled");
	$("link[title='"+style+"']").removeAttr("disabled");

	$.cookie('mystyle', style, { expires: 7 }); // 存储一个带7天期限的 cookie
})
var cookie_style = $.cookie("mystyle");
if(cookie_style!=null){
    $("link[title!='']").attr("disabled","disabled");
	$("link[title='"+cookie_style+"']").removeAttr("disabled");
}
/*左侧导航栏显示隐藏功能*/
$(".subNav").click(function(){
			/*显示*/
			if($(this).find("span:first-child").attr('class')=="title-icon glyphicon glyphicon-chevron-down")
			{
				$(this).find("span:first-child").removeClass("glyphicon-chevron-down");
			    $(this).find("span:first-child").addClass("glyphicon-chevron-up");
			    $(this).removeClass("sublist-down");
				$(this).addClass("sublist-up");
			}
			/*隐藏*/
			else
			{
				$(this).find("span:first-child").removeClass("glyphicon-chevron-up");
				$(this).find("span:first-child").addClass("glyphicon-chevron-down");
				$(this).removeClass("sublist-up");
				$(this).addClass("sublist-down");
			}
		// 修改数字控制速度， slideUp(500)控制卷起速度
	    $(this).next(".navContent").slideToggle(300).siblings(".navContent").slideUp(300);
	})
/*左侧导航栏缩进功能*/
$(".left-main .sidebar-fold").click(function(){

	if($(this).parent().attr('class')=="left-main left-full")
	{
		$(this).parent().removeClass("left-full");
		$(this).parent().addClass("left-off");

		$(this).parent().parent().find(".right-product").removeClass("right-full");
		$(this).parent().parent().find(".right-product").addClass("right-off");


		}
	else
	{
		$(this).parent().removeClass("left-off");
		$(this).parent().addClass("left-full");

		$(this).parent().parent().find(".right-product").removeClass("right-off");
		$(this).parent().parent().find(".right-product").addClass("right-full");


		}
	})

  /*左侧鼠标移入提示功能*/
		$(".sBox ul li").mouseenter(function(){
			if($(this).find("span:last-child").css("display")=="none")
			{$(this).find("div").show();}
			}).mouseleave(function(){$(this).find("div").hide();})
})
</script>
</body>
</html>
